<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >

    <div v-if="gooList.length==0"><h2>空</h2></div>

    <div v-else class="hyp">
      <el-row :gutter="20" type="flex" justify="left">
        <el-col v-for="(item, index) in gooList" :key="index" :span="5" :offset="index > 0 ? 2 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
            <div style="padding: 14px;">
              名称:<span>{{ item.good_name }}</span>
            </div>
            <div style="padding: 14px;">
              售价:<span>{{ item.in_stk }}元/500g</span>
            </div>

          </el-card>
        </el-col>
      </el-row>
    </div>

    <div v-if="gooList.length==0"><h2>空</h2></div>

    <div v-else class="hyp">
      <el-row>
        <el-col v-for="(item, index) in gooList" :key="index" :span="8" :offset="index > 0 ? 2 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
            <div style="padding: 14px;">
              名称:<span>{{ item.good_name }}</span>
            </div>
            <div style="padding: 14px;">
              售价:<span>{{ item.in_stk }}元/500g</span>
            </div>

          </el-card>
        </el-col>
      </el-row>
    </div>
    =======
    >>>>>>> 4eac535fc51f4e68e48ad512d2c93296e96177b8

    <div v-if="gooList.length==0"><h2>空</h2></div>

    <div v-else class="hyp">

      <div v-for="(item, index) in gooList" :key="index" :span="5" class="hyp_index">
        <el-card :body-style="{ padding: '0px' }">
          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
          <div style="padding: 14px;">
            名称:<span>{{ item.good_name | hyp }}</span>
          </div>
          <div style="padding: 14px;">
            售价:<span>{{ item.in_stk }}元/500g</span>
          </div>

        </el-card>
      </div>

    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { good } from '../../../api/shopList'
export default {
  filters: {
    hyp: function(value) {
      if (value.length > 5) {
        return (value = value.slice(0, 5) + '...')
      }
      return value
    }
  },
  data() {
    return {
      dialogVisible: false,
      gooList: []
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    btn() {
      this.dialogVisible = true
    },
    async path_good(value) {
      const { data: data } = await good(value)
      this.gooList = data
      console.log(data)
    }
  }
}
</script>
<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }
  .hyp{
    width: 100%;
 overflow: hidden;

  }
  .hyp_index{
    float: left;
    width: 20%;
    height: 300px;
    margin: 0 10px;
  }
   .hyp>div::first-letter{
      float: right;
  }
</style>
